﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iloviewDemo</title>
    <link href="css/site.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/layout.css" />

</head>
<body>
    <ul id="header">
        <li class="logo">
            <i class="fa fa-home">{{user.name}},</i>
            <i :attr='class'>{{info}}</i>
        </li>
    </ul>
    <ul id="menus">
        <li class="mainMenu">
            <i class="fa fa-th"></i>
            <label>{{user.name}}</label>
            <ul class="submenus">
                <li class="submenu">
                    <p>商品相关</p>
                    <a class="page" name="商品档案" get="商品档案">商品档案</a>
                </li>
            </ul>
        </li>        
        <li class="fauto"></li>
    </ul>
    <ul id="pages" :vm="main">
        <li :for="list" :attr="class">
            <div name="tab">
                <label>{{$item.tab_name}}{{$key}}</label>
            </div>
            <div name="page">
                <p>
                    {{text}},我看见了{{$item.page_name}}和{{$item.text}}
                </p>
            </div>
        </li>
        <li id="-1">
            <ul if='override'> </ul>
        </li>
    </ul>
    <script src="iloview/iloview.js"></script>
    <script>
        const [core, extensions] = using('core', 'extensions');
        extensions.push({
            extensionTest() {
                alert('extensions success!');
            }
        });
        createDefaultVm({
            state() {
                return {
                    info() { return this.user.name === '游客' ? '请登录' : '退出' },
                    class() { return this.user.name === '游客' ? 'btn login' : 'btn logout' },
                    user: {
                        name: '游客'
                    },
                    seen() {
                        return this.user.name !== '游客';
                    }
                }
            },
            main: {
                state() {
                    return {
                        activePage: '工作台',
                        class(vm) {
                            return this.activePage == this.$item.tab_name ? 'active' : 'unActive';
                        },
                        list: [
                            {
                                tab_name: '工作台',
                                page_name: '谁',
                                text: '会计师'

                            },
                            {
                                tab_name: '角色',
                                page_name: '谁谁',

                            },
                            {
                                tab_name: '员工档案',
                                page_name: '谁谁谁',
                            },
                            {
                                tab_name: '其它',
                                page_name: '谁谁谁',
                            },
                        ],
                    }
                },
                event: {
                    click: {
                        '.unActive'(e, state) {
                            state.activePage = this.scope.$item.tab_name;
                        },
                    },

                }
            }
        }).ready((body) => {
            body.extensionTest();
            body.listen({
                click: {
                    '.login'() {
                        body.state.user.name = 'iloview';
                    },
                    '.logout'() {
                        body.state.user.name = '游客';
                    },
                    '[get]': function (e) {
                        var pageName = e.target.getAttribute('get');
                        alert('get:', pageName);
                        conference.convoke('getPage', { pageName: pageName, newPage: true }).catch(x => {
                            console.log('x', x);
                        });
                    },
                },
            });
            core.conference.create('getPage').add({
                url: '/home/getpage',
                fetch: async function (pageName, newPage = true) {
                    let url = `${this.url}?page=${pageName}&newPage=${newPage}`;
                    //let pageContent = await fetch(url).then(res => {
                    //    console.log(res.statusText);
                    //    if (res.ok) return res.text();
                    //    return res.statusText;
                    //});
                    let pageContent = '<div>返回页面</div>';
                    if (newPage) pageContent =
                        `<li id=${pageName}>
                                        <div name="tab">
                                            <label>${pageName}</label>
                                            <i class='fa fa-refresh' get="${pageName}"></i>
                                            <i class="fa fa-times" trigger="pageEvent:close"></i>
                                        </div>
                                        <div name="page">${pageContent}</div>
                                    </li>`;
                    return pageContent;
                },
                say: async function (pipe) {
                    let { pageName, newPage } = pipe;
                    let div = document.createElement('div');
                    div.innerHTML = await this.fetch(pageName, newPage);
                    pipe.page = div.firstChild;
                    let newConf = newPage ? 'addPage' : 'refreshPage';
                    await core.conference.convoke(newConf, pipe);
                }
            }).add({
                say: async function (inPipe) {
                    body.state.activePage = inPipe.pageName;
                }
            });

            core.conference.create('addPage').add({
                say: async function (inPipe) {
                    body.main.el.lastElementChild.before(inPipe.page);
                    let scripts = inPipe.page.getElementsByTagName('script');
                    utils.addScripts(scripts);
                }
            })

            core.conference.create('refreshPage',).add({
                say: async function (inPipe) {
                    let page = body.main.el.children.namedItem(inPipe.pageName);
                    page.children[1].appendChild(inPipe.page);
                }
            });
        })
    </script>
</body>
</html>